<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper</title>
    <link rel="stylesheet" href="../css/marquee.scss">
</head>
<body>
    <div class="marquee">
        <div class="content">
            <div class="list"><img src="../img/1.jpg" alt=""></div>
            <div class="list"><img src="../img/2.jpg" alt=""></div>
            <div class="list"><img src="../img/3.jpg" alt=""></div>
            <div class="list"><img src="../img/4.jpg" alt=""></div>
        </div>
    </div>
    <button id="preBtn" style="color: yellowgreen;">pre</button>
    <button id="nextBtn" style="color: yellowgreen;">next</button>
</body>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
     $(()=>{
        console.log('页面元素加载完毕之后执行')
        const outerWidth = 640,
            outerHeight = 425,
            speed = 3,
            delay = .3;
        var initIndex = 0,
            setTimeId = null;
        var $marquee = $('.marquee');
        var $content = $marquee.find('.content')
        var $list = $content.find('.list')
        var listLength = $list.length;
        var contentWidth = outerWidth*listLength;
        // 获取页面加载的样式
        var style = document.styleSheets
        $marquee.css({
            "width": `${outerWidth}px`,
            "height": `${outerHeight}px`
        });
        $list.css({
            "width": `${outerWidth}px`,
            "height": `${outerHeight}px`
        });
        $content.css({
            "width": `${contentWidth}px`,
            "height": `${outerHeight}px`,
        });
        var clone = $list.eq(0).clone();
        $content.append(clone);
        // 写一个定时器，实现自动播放
        function autoPlay() {
            setTimeId = setInterval(()=>{
                initIndex ++;
                $content.css({
                    "transition": `transform ${delay}s ease`,
                    "transform": `translateX(-${outerWidth*initIndex}px)`
                })
            }, speed*1000)
            // 清理index
            initIndex === listLength? initIndex = 0: '';
        }
        /**
        // 自动轮播
        autoPlay()
        */
        // 动画元素的监听,去除掉每次轮播的抖动
        $content[0].addEventListener('transitionend',()=>{
            $content.css({
                "transition": `none`,
                "transform": `translateX(-${outerWidth*initIndex}px)`
            })
        })
        
        // 按钮播放
        $('#preBtn').mouseenter(()=>{
            if(initIndex === 0){
                initIndex = listLength;
                $content.css({
                "transition": `none`,
                "transform": `translateX(-${outerWidth*initIndex}px)`
            })
            }
        })
        // $('#nextBtn').mouseenter(()=>{
        //     if(initIndex === listLength){
        //         initIndex = 0;
        //         $content.css({
        //         "transition": `none`,
        //         "transform": `translateX(-${outerWidth*initIndex}px)`
        //     })
        //     }
        // })
        $('#preBtn').click(()=>{
            initIndex === 0? initIndex = listLength:''
            initIndex --;
            $content.css({
                "transition": `transform ${delay}s ease`,
                "transform": `translateX(-${outerWidth*initIndex}px)`
            })
            initIndex === 0? initIndex = listLength:''
        })
        $('#nextBtn').click(()=>{
            initIndex ++;
            $content.css({
                "transition": `transform ${delay}s ease`,
                "transform": `translateX(-${outerWidth*initIndex}px)`
            })
            initIndex === listLength? initIndex = 0:''
        })
    })
</script>
</html>